/**
 * 鼠标移动显示位置数据
 */

import React, { Component } from 'react';
// 引入样式
import './cursor.css'

class Index extends Component {
  // 设置状态数据：
  state = {
    x: 0,
    y: 0
  }

  // 处理鼠标位置信息
  handlerPos = (e) => {
    // console.log(e);
    // 做响应式
    this.setState({
      x: e.x,
      y: e.y
    })
  }

  //事件：mousemove
  componentDidMount() {
    window.addEventListener('mousemove', this.handlerPos)
  }


  // 解绑事件
  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handlerPos)
  }



  render() {
    // 获取状态数据
    const { x, y } = this.state;
    return (
      <div>
        <h1>鼠标移动显示位置数据：{x + ' : ' + y}</h1>
      </div>
    );
  }
}

export default Index;